<template>
  <div class="temp">
    <div class="center">
      <div class="el-row">
        <div class="el-col el-col-24">
          <div class="comp">
            <div class="tmpl routeanimate">
              <div class="section">
                <div class="location">
                  <span>当前位置：</span>
                  <a href="/index.html">首页</a> &gt;
                  <a href="#/site/member/center" class="">会员中心</a>&gt;
                  <a href="#/site/member/orderlist" class="">我的订单</a>
                </div>
              </div>
              <div class="section clearfix">
                <div class="left-260">
                  <div class="bg-wrap">
                    <div class="avatar-box">
                      <a href="/user/center/avatar.html" class="img-box">
                        <i class="iconfont icon-user-full"></i>
                      </a>
                      <h3>

                        ivanyb

                      </h3>
                      <p>
                        <b>注册会员</b>
                      </p>
                    </div>
                    <div class="center-nav">
                      <ul>
                        <li>
                          <h2>
                            <i class="iconfont icon-order"></i>
                            <span>订单管理</span>
                          </h2>
                          <div class="list">
                            <p>
                              <router-link to="/site/vip/goodslist">
                                <i class="iconfont icon-arrow-right"></i>交易订单
                              </router-link>
                            </p>
                          </div>
                        </li>
                        <li>
                          <h2>
                            <i class="iconfont icon-user"></i>
                            <span>账户管理</span>
                          </h2>
                          <div class="list">
                            <p>
                              <a href="#/site/member/center" class="">
                                <i class="iconfont icon-arrow-right"></i>账户资料</a>
                            </p>
                            <p>
                              <a href="#/site/member/center" class="">
                                <i clrouter-linkss="iconfont icon-router-linkrrow-right"></i>头像设置</a>
                            </p>
                            <p>
                              <a href="#/site/member/center" class="">
                                <i class="iconfont icon-arrow-right"></i>修改密码</a>
                            </p>
                            <p>
                              <a href="javascript:void(0)">
                                <i class="iconfont icon-arrow-right"></i>退出登录</a>
                            </p>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div class="right-auto">
                  <div class="bg-wrap" style="min-height: 765px;">
                    <div class="sub-tit">
                      <a href="javascript:void(0)" onclick="window.history.go(-1)" class="add">
                        <i class="iconfont icon-reply"></i>返回</a>
                      <ul>
                        <li class="selected">
                          <a href="javascript:;">查看订单</a>
                        </li>
                      </ul>
                    </div>
                    <div class="order-progress" v-if="orderlist.orderinfo">
                      <ul>
                        <li v-bind="{'class':'first '+ (status>=1?'active':'')}">
                          <div class="progress">下单</div>
                          <div class="info">{{orderlist.orderinfo.add_time | timefil('YY-MM-DD HH:mm:ss')}}</div>
                        </li>
                        <li v-bind="{class:(status>=2?'active':'')}">
                          <div class="progress">已付款</div>
                          <div class="info">{{orderlist.orderinfo.payment_time | timefil('YY-MM-DD HH:mm:ss')}}</div>
                        </li>
                        <li v-bind="{class:(status>=3?'active':'')}">
                          <div class="progress">已经发货</div>
                          <div class="info" v-if="status>=3">{{orderlist.orderinfo.express_time | timefil('YY-MM-DD HH:mm:ss')}}</div>
                        </li>
                        <li v-bind="{class:'last '+(status>=4?'active':'')}">
                          <div class="progress">已完成</div>
                          <div class="info" v-if="status>=4">{{orderlist.orderinfo.confirm_time | timefil('YY-MM-DD HH:mm:ss')}}</div>
                        </li>
                      </ul>
                    </div>
                    <div class="form-box accept-box form-box1" v-if="orderlist.orderinfo">
                      <!-- orderlist.orderinfo 不加这个,效果不影响,但是会报错,报错 order_no not defind  那是因为数据还没有回来,这个没有值,就开始渲染了,所以报错,后面值来了,效果不影响,但是报错已经报出去了,所以加这个避免报错-->
                      <dl class="head form-group">
                        <dd>
                          订单号：{{orderlist.orderinfo.order_no}}
                          <router-link v-if="orderlist.orderinfo.status==1" v-bind="{to:'/site/pay/'+orderlist.orderinfo.id}" class="btn-pay">去付款</router-link>
                          <a href="javascript:;" @click='complate(orderlist.orderinfo.id)' v-if='orderlist.orderinfo.status==3' class="btn-pay">签收</a>
                          <!---->
                        </dd>
                      </dl>
                      <dl class="form-group">
                        <dt>订单状态：</dt>
                        <dd>
                          {{orderlist.orderinfo.statusName}}
                        </dd>
                      </dl>
                      <dl class="form-group">
                        <dt>快递单号：{{orderlist.orderinfo.express_no}}</dt>
                        <dd>

                        </dd>
                      </dl>
                      <dl class="form-group">
                        <dt>支付方式：</dt>
                        <dd>{{orderlist.orderinfo.paymentTitle}}</dd>
                      </dl>
                    </div>
                    <div class="table-wrap">
                      <table width="100%" border="0" cellspacing="0" cellpadding="5" class="ftable">
                        <tbody>
                          <tr>
                            <th align="left" colspan="2">商品信息</th>
                            <th width="10%">单价
                            </th>
                            <th width="10%">数量</th>
                            <th width="10%">金额</th>
                          </tr>
                          <tr v-for="item in orderlist.goodslist" :key='item.id'>
                            <td width="60">
                              <img :src="item.imgurl" class="img">
                            </td>
                            <td align="left">
                             <router-link v-bind="{to:'/site/goodsinfo/'+item.goods_id}"> {{item.goods_title}}</router-link>
                            </td>
                            <td align="center">
                              <s>￥{{item.goods_price}}</s>
                              <p>￥{{item.real_price}}</p>
                            </td>
                            <td align="center">{{item.quantity}}</td>
                            <td align="center">￥{{item.quantity*item.goods_price}}</td>
                          </tr>

                          <tr>
                            <td colspan="7" align="right">
                              <p>商品金额：
                                <b class="red">￥{{acount}}</b>&nbsp;&nbsp;+&nbsp;&nbsp;运费：
                                <b class="red" v-if="orderlist.orderinfo">￥{{orderlist.orderinfo.express_fee}}</b>
                              </p>
                              <p style="font-size: 22px;">应付总金额：
                                <b class="red" v-if="orderlist.orderinfo">￥{{acount+(orderlist.orderinfo.express_fee)}}</b>
                              </p>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                    <div class="form-box accept-box" v-if='orderlist.orderinfo'>
                      <dl class="head form-group">
                        <dd>收货信息</dd>
                      </dl>
                      <dl class="form-group">
                        <dt>顾客姓名：</dt>
                        <dd>{{orderlist.orderinfo.accept_name}}</dd>
                      </dl>
                      <dl class="form-group">
                        <dt>送货地址：</dt>
                        <dd>{{orderlist.orderinfo.area}}{{orderlist.orderinfo.address}}</dd>
                      </dl>
                      <dl class="form-group">
                        <dt>联系电话：</dt>
                        <dd>{{orderlist.orderinfo.mobile}} </dd>
                      </dl>
                      <dl class="form-group">
                        <dt>电子邮箱：</dt>
                        <dd>{{orderlist.orderinfo.email}} </dd>
                      </dl>
                      <dl class="form-group">
                        <dt>备注留言：</dt>
                        <dd>{{orderlist.orderinfo.message}}</dd>
                      </dl>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
    export default {
        data() {
            return {
                orderID: this.$route.params.orderID, //url的订单ID
                orderlist: {}, //存储API返回回来的数据
                status: 1, //付款那些状态值
                acount: 0, //商品的总金额
            }
        },
        created() {
            this.getlist();
        },
        methods: {
            complate(uid) {
                var url = '/site/validate/order/complate/' + uid;
                this.$http.get(url).then(res => {
                    if (res.data.status == 1) {
                        return this.$message.error(res.data.message);
                    }
                    // 签收成功
                    this.getlist();
                })
            },
            getlist() { //获取查看订单详情信息
                var url = '/site/validate/order/getorderdetial/' + this.orderID;
                this.$http.get(url).then(res => {
                    if (res.data.status == 1) {
                        return this.$message.error(res.data.message);
                    }
                    // 成功
                    this.orderlist = res.data.message; //api请求回来的数据
                    this.status = res.data.message.orderinfo.status; //付款那些状态值

                    //算商品总价格
                    var goodlen = this.orderlist.goodslist;
                    for (var i = 0; i < goodlen.length; i++) {
                        this.acount += goodlen[i].goods_price * goodlen[i].quantity;
                    }
                })
            }
        },
    }
</script>
<style></style>